<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>剧本文件</title>

    <!--引入css-->
    <!--Open Sans Font-->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
    <!--Bootstrap Stylesheet [ REQUIRED ]-->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
    <!--Nifty Stylesheet [ REQUIRED ]-->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/nifty.css') }}">
    <!--FontAwesome [ DEMONSTRATION ]-->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/font-awesome.min.css') }}">

    <!--Treeview-->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='plugins/bootstrap-treeview/css/bootstrap-treeview.min.css') }}">
    <!--bees-->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/bees.css') }}">

</head>

<html>
    <body>
        <div class="panel-body">
            <div class="row">
                <div class="col-lg-12">
                    <fieldset class="pad-top">
                        <div class="form-group">
                            <div class="col-lg-12" style="margin-top: 8px">
                                <div class="fs-box fullscreen">
                                    <div class="label label-default">
                                        <i class="fs-max fa fa-expand"></i>
                                        <i class="fs-min fa fa-compress hidden"></i>
                                    </div>
                                    <div id="editor" class="form-control" style="height: 600px; width: 100%">{{ content }}</div>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                </div>
            </div>
        </div>
    </body>
</html>

<!--引入JavaScript-->
<!--jQuery [ REQUIRED ]-->
<script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
<!--BootstrapJS [ RECOMMENDED ]-->
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
<!--NiftyJS [ RECOMMENDED ]-->
<script src="{{ url_for('static', filename='js/nifty.js') }}"></script>
<!--CsrfJS-->
<script src="{{ url_for('static', filename='js/csrf.js') }}"></script>

<!--bees-->
<script src="{{ url_for('static', filename='js/bees.js') }}"></script>
<!--Treeview-->
<script src="{{ url_for('static', filename='plugins/bootstrap-treeview/js/bootstrap-treeview.min.js') }}"></script>
<!--ace-->
<script type="text/javascript" src="{{ url_for('static', filename='plugins/ace/ace.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='plugins/ace/ext-language_tools.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='plugins/ace/theme-tomorrow.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='plugins/ace/mode-php.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='plugins/ace/mode-python.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='plugins/ace/mode-sh.js') }}"></script>

<script type="text/javascript">
    $(function () {
        // 代码编辑器初始化
        var editor = null;
        $(document).ready(function () {
            ace.require("ace/ext/language_tools");
            editor = ace.edit("editor");
            editor.setOptions({
                enableBasicAutocompletion: true,
                enableSnippets: true,
                enableLiveAutocompletion: true //只能补全
            });
            editor.setTheme("ace/theme/tomorrow");//monokai模式是自动显示补全提示
            editor.getSession().setMode("ace/mode/yaml");//语言
            editor.setShowPrintMargin(false);
            editor.setFontSize(14);
        });

        // 代码编辑器
        $(".fs-box > .label").on('click', function () {
            $(this).parent('.fs-box').toggleClass('fullscreen');
            if($(this).parent('.fs-box').hasClass('fullscreen')){
                $('.fs-box .fs-max').addClass('hidden');
                $('.fs-box .fs-min').removeClass('hidden');
                $('#editor').css({'height':'100%'});
                editor.resize();
            }else {
                $('.fs-box .fs-min').addClass('hidden');
                $('.fs-box .fs-max').removeClass('hidden');
                $('#editor').css({'height':'520px'});
                editor.resize();
            }
        });
    })

</script>

